<template>
    <div class="register">
      <h2>招商银行注册</h2>
      <form @submit.prevent="registerUser">
        <div class="input-group">
          <label for="username">用户名</label>
          <input id="username" v-model="form.username" type="text" required />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input id="password" v-model="form.password" type="password" required />
        </div>
        <div class="input-group">
          <label for="confirmPassword">确认密码</label>
          <input id="confirmPassword" v-model="form.confirmPassword" type="password" required />
        </div>
        <div class="input-group">
          <label for="phone">电话号码</label>
          <input id="phone" v-model="form.phone" type="tel" required />
        </div>
        <div class="button-group">
          <button type="submit" :disabled="isSubmitting">注册</button>
        </div>
        <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RegisterRegister',
    data() {
      return {
        form: {
          username: '',
          password: '',
          confirmPassword: '',
          phone: ''
        },
        isSubmitting: false,
        errorMessage: ''
      };
    },
    methods: {
      async registerUser() {
        // 客户端验证
        if (this.form.password !== this.form.confirmPassword) {
          this.errorMessage = '密码和确认密码不一致';
          return;
        }
        if (!/^\d{11}$/.test(this.form.phone)) {
          this.errorMessage = '请输入有效的11位手机号码';
          return;
        }
  
        this.isSubmitting = true;
        this.errorMessage = '';
  
        // try {
        //   // 模拟向后端发送注册请求
        //   const response = await fetch('/api/register', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({
        //       username: this.form.username,
        //       password: this.form.password, // 在真实环境中应该加密密码
        //       phone: this.form.phone
        //     })
        //   });
          if (this.form.password == this.form.confirmPassword) {
            alert('注册成功');
            // 成功后重定向到登录页面或主页
            this.$router.push('/login');
          } else {
            this.errorMessage = '注册失败，请稍后再试';
          }
        // } catch (error) {
        //   this.errorMessage = '网络错误，请检查您的连接';
        // } finally {
        //   this.isSubmitting = false;
        // }
      }
    }
  };
  </script>
  
  <style scoped>
  .register {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .input-group {
    margin-bottom: 15px;
  }
  
  .input-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .button-group button {
    padding: 10px 20px;
    background-color: #215188;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .error {
    color: red;
  }
  </style>